<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-08-09 09:47:21
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2022-08-09 11:21:15
 * @Description: 编辑抽屉组件

 * @Param {Boolean} visible 抽屉展示与关闭 
 * @Param {String} title 抽屉组件标题
 * @Param {Number} width 抽屉组件宽度(px)

 * @FilePath: \tuanfeng-admin-front\src\components\EditDrawer.vue
-->
<script setup lang="ts">
import { toRefs } from "vue";

const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    title: {
        type: String,
        required: true,
    },
    width: {
        type: Number,
        default: 600,
    },
});

const { visible, title, width } = toRefs(props);
const emits = defineEmits(["update:visible", "confirm"]);
</script>
<template>
    <el-drawer v-model="visible" :title="title" :size="`${width}px`" destroy-on-close :close-on-click-modal="false" direction="rtl" @close="$emit('update:visible', false)">
        <el-scrollbar view-style="overflow-x: hidden">
            <slot></slot>
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="$emit('update:visible', false)">取消</el-button>
                <el-button type="primary" @click="$emit('confirm')">确定</el-button>
            </span>
        </template>
    </el-drawer>
</template>
<style scoped lang="less">
@import url("../assets/less/common.less");
</style>
